<template>
  <div class="parent-component">
    <!-- 引入子组件，通过插槽自定义行样式 -->
    <Mykc>
      <!-- 作用域插槽：使用 v-slot 接收子组件传递的 courses 数据 -->
      <template v-slot:default="{ courses }">
        <!-- 使用 v-for 循环渲染课程行，自定义每行的样式和内容 -->
        <tr 
          v-for="course in courses" 
          :key="course.id" 
          class="custom-course-row"
        >
          <!-- 课程ID -->
          <td class="course-id">{{ course.id }}</td>
          
          <!-- 课程名称（父组件自定义样式） -->
          <td class="course-name">
            {{ course.courseName }}
            <span v-if="course.period > 35" class="hot-tag">热门课程</span>
          </td>
          
          <!-- 讲师和课时（父组件自定义样式） -->
          <td class="teacher-name">{{ course.teacher }}</td>
          <td class="course-period">{{ course.period }} 课时</td>
        </tr>
      </template>
    </Mykc>
  </div>
</template>

<script lang="ts" setup>
// 引入子组件（注意路径是否正确）
import Mykc from '../components/Myck.tsx';
</script>

<style scoped>
/* 父组件中定义插槽内容的样式 */

/* 表格基础样式 */
.course-table-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.course-table {
  width: 100%;
  border-collapse: collapse;
}

th {
  padding: 16px;
  text-align: left;
  background-color: #f8f9fa;
  border-bottom: 2px solid #e5e7eb;
  font-weight: 500;
  color: #333;
}

td {
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
  color: #666;
  font-size: 14px;
}

/* 父组件自定义行样式 */
.custom-course-row {
  transition: all 0.2s ease;
}

.custom-course-row:hover {
  background-color: #f8f9fa;
}

.hot-tag {
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: #ff4d4f;
  border: 1px solid #ffecec;
}

/* 列样式自定义 */
.course-id {
  width: 80px;
  font-weight: 500;
  color: #212121;
}

.course-name {
  width: 240px;
  display: flex;
  align-items: center;
}

.teacher-name {
  width: 160px;
}

.course-period {
  width: 100px;
  text-align: right;
}
</style>